<template>
	<view v-if="loaded" class="container">
		<view class="nav-wrap">
			<uni-navbar
				@tabClick="tabClick"
				:navList="navList"
				:tabCurrentIndex="tabCurrentIndex"
				:borderColor="themeStyles.lightMainColor"
			></uni-navbar>
		</view>
		<view class="content">
			<empty
				v-if="loadingType !== 'loading' && !couponList.length"
				:src="baseTemplateFileUri + 'image/emptyStatus/common.png'"
			></empty>
			<template v-else>
				<view class="coupon-wrap">
					<uni-coupon-col
						v-for="(item, index) in couponList"
						:key="index"
						:coupon="item"
						@click="onClickCoupon(item)"
						:option="getCouponOption(item.currentStatus)"
						:couponType="getCouponType(item.couponType)"
					></uni-coupon-col>
				</view>
				<uni-load-more :status="loadingType"> </uni-load-more>
			</template>
		</view>
	</view>
</template>

<script>
import { queryMyCouponList } from "@/lib/api/couponServer/customer";

import uniLoadMore from "@/components/uniLoadMore/uniLoadMore";
import uniCouponCol from "@/components/coupon/uniCouponCol";
import empty from "@/components/empty";
import uniNavbar from "@/components/uniNavbar/uniNavbar";

/** mixins begin */
import couponMixin from "@/mixins/coupon/coupon";
/** mixins end */

let currentPage = 1,
	pageSize = 12;
export default {
	mixins: [couponMixin],
	components: {
		uniCouponCol,
		uniLoadMore,
		uniNavbar,
		empty
	},
	data() {
		return {
			tabCurrentIndex: 0,
			navList: [
				{
					text: "待使用",
					status: 0
				},
				{
					text: "已失效",
					status: 2
				}
			],
			loadingType: "more",
			couponList: [
				{
					startTime: "2020-04-07",
					endTime: "2020-04-30"
				},
				{
					startTime: "2020-04-07",
					endTime: "2020-04-30"
				},
				{
					startTime: "2020-04-07",
					endTime: "2020-04-30"
				}
			]
		};
	},

	onLoad() {
		currentPage = 1;
		this.getMyCouponList();
	},

	//下拉刷新
	onPullDownRefresh() {
		currentPage = 1;
		this.couponList = [];
		this.getMyCouponList();
	},

	// 上拉加载
	onReachBottom() {
		if (this.loadingType === "loading" || this.loadingType === "more") {
			currentPage++;
			this.getMyCouponList();
		}
	},

	methods: {
		onClickCoupon(coupon) {
			if (coupon.availableStatus === 1 || coupon.currentStatus === 1)
				return;
			this.switchTo("/pages/tabbar/category");
		},

		tabClick(index) {
			if (this.tabCurrentIndex === index) return;
			this.tabCurrentIndex = index;
			currentPage = 1;
			this.getMyCouponList();
		},

		// 配置卡券组件option
		getCouponOption(currentStatus) {
			let option = {
				metaRightText: "",
				canUseColor: ""
			};
			let bgImageName = "";
			switch (currentStatus) {
				case 0:
					option.metaRightText = "立即使用";
					option.canUseColor = this.themeStyles.mainColor;
					option.canUseMainColor = this.themeStyles.lightMainColor;
					bgImageName = "_can";
					break;
				case 1:
					option.metaRightText = "未到使用时间";
					option.canUseColor = this.themeStyles.lightMainColor;
					option.canUseMainColor = this.themeStyles.mainColor;
					bgImageName = "_can";
					break;
				case 2:
					option.metaRightText = "已失效";
					option.canUseColor = "";

					break;
				default:
					option.metaRightText = "已使用";
					option.canUseColor = "";
					break;
			}

			// option.bgImage =
			// 	this.baseTemplateFileUri +
			// 	`image/coupon/coupon_bg${bgImageName}.png`;
			return option;
		},

		async getMyCouponList() {
			this.loadingType = "loading";
			const propsData = {
				currentPage,
				pageSize,
				availableStatus: this.tabCurrentIndex
			};
			try {
				const res = await queryMyCouponList(propsData);
				const couponList = res.data.list;
				if (currentPage === 1) {
					this.couponList = couponList;
				} else {
					this.couponList = this.couponList.concat(couponList);
				}
				const noMore = this.couponList.length >= res.data.total;
				this.loadingType = noMore ? "noMore" : "more";
				uni.stopPullDownRefresh();
				this.loaded = true;
			} catch (error) {
				console.log("error", error);
				this.loaded = true;
				this.couponList = [];
				this.$api.showToast(error.resultInfo || "操作失败！");
				uni.stopPullDownRefresh();
			}
		}
	}
};
</script>

<style lang="scss" scoped>
@import "@/pages/activity/styles/coupon/myCoupon.scss";
</style>